<template>
  <div class="debugSetting">
    <van-nav-bar title="开发者选项" left-arrow @click-left="onClickLeft" />
    <section class="van-section">
      <section class="van-block">
        <h2 class="van-title">选择连接方式：</h2>
      </section>
    </section>
    <van-radio-group v-model.lazy="modeValue">
      <van-cell-group>
        <van-cell title="使用mockjs本地假数据" clickable @click="modeValue = '1'">
          <van-radio slot="right-icon" name="1" />
        </van-cell>
        <van-cell title="链接服务器路径" clickable @click="modeValue = '2'">
          <van-radio slot="right-icon" name="2" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-cell-group v-if="showPathValue">
      <van-field  
        v-model="APIPathValue" 
        clearable 
        placeholder="请输入调用API地址" 
      />
      <van-field 
        v-model="resourcePathValue" 
        clearable 
        placeholder="请输入资源路径地址" 
      />
      <van-cell value="(*不填写则为默认路径)" />
    </van-cell-group>
    <section class="van-section">
      <section class="van-block">
        <h2 class="van-title">vconsole模式：</h2>
      </section>
    </section>
    <van-cell-group>
      <van-switch-cell v-model="vconsoleValue" title="开启vconsole调试" />
    </van-cell-group>
    <section class="van-section">
      <section class="van-block">
        <van-button 
          type="primary" 
          size="large" 
          color="linear-gradient(to right, #4bb0ff, #6149f6)"
          @click="doReset"
        >确认设置</van-button>
      </section>
    </section>
  </div>
</template>

<script>
  import { NavBar, Cell, CellGroup, Field, Button, RadioGroup, Radio, SwitchCell } from 'vant';
  import { mixins } from '../common/mixins';
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'debugSetting',
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [SwitchCell.name]: SwitchCell,
    },
    mixins: [mixins],
    data () {
      return {
        modeValue: '2',
				APIPathValue: '',
        resourcePathValue: '',
        vconsoleValue: false
      }
    },
    computed:{
      ...mapState ([
        'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
      ]),
      showPathValue () {
        return this.modeValue == '2';
      }
    },
    created () {
      // 判断是否有存储过开发者选项的配置
			let {mode, APIPath, resourcePath, vconsole} = this.debugSetting;
			this.modeValue = mode ? mode : '2';
			if(this.modeValue == '2') {
				this.APIPathValue = APIPath ? APIPath : '';
				this.resourcePathValue = resourcePath ? resourcePath : '';
			}
			this.vconsoleValue = vconsole ? vconsole : false;
    },
    methods:{
      ...mapMutations ([ 
        'updateDebugSetting' // 将 this.updateDebugSetting(value) 映射为 this.$store.commit('updateDebugSetting', value)
      ]),
      doReset () {
				this.updateDebugSetting({
					mode: this.modeValue,
					APIPath: this.modeValue == '1' ? '' : this.APIPathValue,
					resourcePath: this.modeValue == '1' ? '' : this.resourcePathValue,
					vconsole: this.vconsoleValue
				});
        let router = this.$router;
        this.$UIplugins.message({
          message: '切换设置成功（马上将刷新应用）',
          closeCallback () {
            router.push({path: '/'});
            location.reload();
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .debugSetting {
  }
</style>
